import React from 'react';
import {Card,Button,Radio} from 'antd';
import './ui.less';

export default class Buttons extends React.Component {
  state={
    loading:true,
    size:'default'
  }

  handleCloseLoading=()=>{
    this.setState({
      loading:false
    });
  }

  handleChange=(e)=>{
    this.setState({
      size:e.target.value
    });
  }

  render(){
    return (
        <div>
          <Card title="基础按钮" className="card_wrapper">
            <Button type="primary">主按钮</Button>
            <Button>普通按钮</Button>
            <Button type="dashed">虚线按钮</Button>
            <Button type="danger">删除按钮</Button>
            <Button disabled>删除按钮</Button>
          </Card>
          <Card title="图形按钮" className="card_wrapper">
            <Button icon="plus">增加</Button>
            <Button icon="edit">修改</Button>
            <Button icon="delete">删除</Button>
            <Button icon="search" shape="circle"></Button>
            <Button icon="search" type="primary">搜索</Button>
            <Button icon="download" type="primary">下载</Button>
          </Card>
          <Card title="Loading按钮" className="card_wrapper">
            <Button type="primary" loading={this.state.loading}>确定</Button>
            <Button type="primary" shape="circle" loading={this.state.loading}></Button>
            <Button icon="edit" loading={this.state.loading}>点击加载</Button>
            <Button shape="circle" loading={this.state.loading}></Button>
            <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>
          </Card>
          <Card title="按钮组" className="card_wrapper">
            <Button.Group>
              <Button icon="left" type="primary" style={{marginRight:0}}>返回</Button>
              <Button icon="right" type="primary">前进</Button>
            </Button.Group>
          </Card>
          <Card title="按钮尺寸" className="card_wrapper">
            <Radio.Group value={this.state.size} onChange={this.handleChange}>
              <Radio value="small">小</Radio>
              <Radio value="default">中</Radio>
              <Radio value="large">大</Radio>
            </Radio.Group>
            <Button size={this.state.size}>返回</Button>
            <Button type="primary" size={this.state.size}>前进</Button>
          </Card>
        </div>
    )
  }
}